<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>
<body>
    <form name="animationForm">
        <p>速度</p>
        <input type="radio" name="speed" value="slow">slow
        <input type="radio" name="speed" value="normal">normal
        <input type="radio" name="speed" value="fast">fast
        <p>效果</p>
        <input type="radio" name="easing" value="swing">swing
        <input type="radio" name="easing" value="linear">linear
        <p>滑块</p>
        <input type="range" name="ranges">
        <br>
    </form>
    <button data-type="show">显示</button>
    <button data-type="hide">隐藏</button>
    <button data-type="toggle">切换</button>
    <button data-type="to"xianshi>相应透明度显示</button>
    <div class="box"></div>
    <script>
        $('button').click(function () {
            //获取表单内所有的元素
            let elements = document.forms.animationForm.elements;
            //获取元素中name为speed中的值
            let speed = elements.speed.value;
            //获取元素中name为easing中的值
            let easing = elements.easing.value;
            //获取到滑块的值 滑块值是1-100 fadeTo的透明值是0-1所以我们需要/100
            let ranges = (+elements.ranges.value)/100;
                if (this.dataset.type === 'show') {
                    $('.box').fadeIn(speed,easing);
                } else if (this.dataset.type === 'hide') {
                    $('.box').fadeOut(speed, easing);
                } else if(this.dataset.type === 'toggle'){
                    $('.box').fadeToggle(speed, easing);
                }  else{
                    $('.box').fadeTo(speed,ranges,easing);
                }
        })
    </script>
</body>
</html>